<template>
  <div class="container">
    <div class="app-container">
      <div class="top">
        <el-form ref="formData" :model="formData" label-width="100px" class="demo-ruleForm" :inline="true">
          <el-row type="flex" justify="space-between">
            <el-form-item label="任务编号" prop="id">
              <el-input v-model="formData.id" placeholder="请输入任务编号" style="width:280px" />
            </el-form-item>
            <el-form-item label="任务分配状态" prop="assignedStatus">
              <el-select v-model="formData.assignedStatus" placeholder="请选择" style="width:280px">
                <el-option label="已分配" value="2" />
                <el-option label="待人工分配" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="满载状态" prop="loadingStatus">
              <el-select v-model="formData.loadingStatus" placeholder="请选择" style="width:280px">
                <el-option label="半载" value="1" />
                <el-option label="满载" value="2" />
                <el-option label="空载" value="3" />
              </el-select>
            </el-form-item>
          </el-row>

          <el-row type="flex" justify="space-between">
            <el-form-item label="车牌号码" prop="licensePlate">
              <el-input v-model="formData.licensePlate" placeholder="请输入车牌号码" style="width:280px" />
            </el-form-item>

            <el-form-item label="起始地机构" prop="startAgencyId">
              <el-cascader
                v-model="formData.startAgencyId"
                :options="options"
                style="width:280px"
                :show-all-levels="false"
                :props="defaultProps"
                placeholder="请选择起始地机构"
                @change="tartChange"
              />
            </el-form-item>

            <el-form-item label="目的地机构" prop="endAgencyId">
              <el-cascader
                v-model="formData.endAgencyId"
                :options="options"
                style="width:280px"
                :show-all-levels="false"
                :props="defaultProps"
                placeholder="请选择起始地机构"
                @change="endChange"
              />
            </el-form-item>
          </el-row>
          <el-row type="flex" justify="center">
            <el-form-item>
              <el-button type="primary" style="background: #e15536;width: 90px;border:0px" @click="searchData">搜索</el-button>
              <el-button style="width: 90px;" @click="resetData">重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!-- tab栏 -->
      <el-tabs type="border-card" class="border-card" @tab-click="tabBtn">
        <el-tab-pane label="全部" name="0" />
        <el-tab-pane label="代提货" name="1" />
        <el-tab-pane label="进行中" name="2" />
        <el-tab-pane label="已完成" name="4" />
        <el-tab-pane label="已取消" name="5" />
      </el-tabs>

      <div class="main">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" type="index" label="序号" width="60" />
          <el-table-column align="center" prop="id" label="运输任务编号" width="180" />
          <el-table-column align="center" prop="truck.licensePlate" label="车牌号" width="100" />
          <el-table-column align="center" prop="startAgency.name" label="起始地" width="150" />
          <el-table-column align="center" prop="endAgency.name" label="目的地" width="170" />
          <el-table-column align="center" prop="status" label="运输任务状态" width="120" />
          <el-table-column align="center" prop="loadingStatus" label="车辆装载状态" width="120" />
          <el-table-column align="center" prop="assignedStatus" label="任务分配状态" width="120" />
          <el-table-column align="center" prop="planDepartureTime" label="计划发车时间" width="160" />
          <el-table-column align="center" prop="actualDepartureTime" label="实际发车时间" width="160" />
          <el-table-column align="center" prop="updated" label="更新时间" width="160" />
          <el-table-column align="center" fixed="right" label="操作" width="180">
            <template #default="{row}">
              <el-button type="text" size="small" style="margin-right:10px" @click="detail(row.id)">查看</el-button>|
              <el-button type="text" size="small" style="color:red;margin:0 10px">取消</el-button>|
              <el-button type="text" size="small">手动调整</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination background layout="prev, pager, next" :total="total" :current-page="pageCount.page" @current-change="pageChange" />
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getTransportAPI } from '@/api/dispatch'
import { getOrgAPI } from '@/api/basic'
export default {
  name: 'Transport',
  data() {
    return {
      formData: {
        assignedStatus: null,
        endAgencyId: null,
        id: null,
        licensePlate: '',
        loadingStatus: null,
        planArrivalTime: '',
        startAgencyId: null,
        status: null,
        truckId: null,
        page: 1,
        pageSize: 10
      },
      pageCount: {
        page: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      loadingStatus: [
        { id: 1, value: '半载' },
        { id: 2, value: '满载' },
        { id: 3, value: '空载' }
      ],
      assignedStatus: [
        { id: 1, value: '未分配' },
        { id: 2, value: '已分配' },
        { id: 3, value: '待人工分配' }
      ],
      status: [
        { id: 1, value: '待执行' },
        { id: 2, value: '进行中' },
        { id: 3, value: '待确认' },
        { id: 4, value: '已完成' },
        { id: 5, value: '已取消' }
      ],
      options: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        // 难点： 要传一个 id 过去不然会导致选择一个选项全部都会选中
        value: 'id',
        // 可以选中级联中 每一级 任意一个选项
        checkStrictly: true
      }
    }
  },
  created() {
    this.getTransportList(this.pageCount)
    this.getOrgList()
  },
  methods: {
    async getTransportList(data) {
      const res = await getTransportAPI(data)
      this.total = +res.data.data.counts
      this.tableData = res.data.data.items
      // 把获取到数字转换成相应 文字意思
      this.tableData.forEach(value => {
        this.loadingStatus.forEach(item => {
          if (value.loadingStatus === item.id) {
            value.loadingStatus = item.value
          }
        })

        this.assignedStatus.forEach(item => {
          if (value.assignedStatus === item.id) {
            value.assignedStatus = item.value
          }
        })

        this.status.forEach(item => {
          if (value.status === item.id) {
            value.status = item.value
          }
        })
      })
    },
    pageChange(page) {
      // 页数改变时刷新数据
      this.pageCount.page = page
      this.getTransportList(this.pageCount)
    },
    tabBtn(value) {
      const num = +value.name
      this.pageCount.page = 1
      // 判断是否点击 '全部' 栏那个按钮
      if (num === 0) {
        // 全部：就把 status 删除否则会影响数据
        if (this.pageCount.status) {
          delete this.pageCount.status
        }
        this.getTransportList(this.pageCount)
      } else {
        // 点击其它状态 ：就添加 status 属性
        this.pageCount.status = num
        this.getTransportList(this.pageCount)
      }
    },
    resetData() {
      // 利用 element-ui 表单重置表单
      this.$refs.formData.resetFields()
      this.getTransportList(this.pageCount)
    },
    async searchData() {
      // 搜索按钮
      this.getTransportList(this.formData)
    },
    async getOrgList() {
      const res = await getOrgAPI()
      // 将数组格式的字符串转换成数组
      // const arr = eval('(' + res.data.data + ')')
      const arr = JSON.parse(res.data.data)
      this.options = arr
    },
    tartChange(data) {
      // data是获取到一个全部路径 id 的数组； 把初始地最后的 id 传给 endAgencyId
      this.formData.startAgencyId = data[data.length - 1]
    },
    endChange(data) {
      // data是获取到一个全部路径 id 的数组； 把目的地最后的 id 传给 endAgencyId
      this.formData.endAgencyId = data[data.length - 1]
    },
    detail(id) {
      // 跳转到运输任务详情页面
      this.$router.push(`/dispatch/transportDetail/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
  background-color: #fff;
  padding-top: 20px;
}
.active{
    background-color: #ffeeeb;
    color: #e15536;
}
.main{
  margin-top: 20px;
  background-color: #fff;
}
.border-card{
  background-color: #fff;
  width:100%;
  margin-top:20px
}
</style>
